<template>
	<!-- 巡视过程 -->
	<u-popup
		:round="20"
		:show="visible"
		@close="handleDoubleCheckClose()"
		overlayStyle="z-index:10075;"
	>
		<view class="tour-process">
			<view class="tour-process-title">巡视过程</view>
			<div class="tour-process-list">
				<div :class="item.usable?'tour-process-item':'tour-process-item disabled'" 
				:style="selectedItem.value == item.value?'color:#4088FE;font-weight:bold;':''" 
				v-for="(item) in list" :key="item.value" @click="handleSelect(item)"
				v-show="item.show">{{item.label}}</div>
			</div>
			<!-- <view class="submit-button">
				<button style="width: 30%" @click="handleClose()">取消</button>
				<button
					class="primary-button"
					style="width: calc(70% - 50rpx)"
					@click="handleSubmit()"
				>
					确认
				</button>
			</view> -->
		</view>
	</u-popup>
</template>

<script>
import { mapState } from "vuex"
import {
	getDateTimeString,
	getAdviceType,
	getPlanStatus,
	showToast,
} from "@/static/js/common.js"

export default {
	components: {},
	props: {},
	data() {
		return {
			visible: false, //弹窗显示
			list:[
				{
					label:'输血开始',
					value:'3',//血袋状态
					usable:false,//是否可选
					show:true,//是否展示
				},
				{
					label:'输血开始后15分钟',
					value:'4',
					usable:true,
					show:true,
				},
				{
					label:'输血结束',
					value:'5',
					usable:true,
					show:true,
				},
				{
					label:'输血结束后一小时',
					value:'6',
					usable:true,
					show:true,
				},
				{
					label:'其他',
					value:'10',
					usable:true,
					show:true,
				},
				{
					label:'暂停',
					value:'11',
					usable:true,
					show:true,
				},
				{
					label:'继续',
					value:'12',
					usable:true,
					show:true,
				},
			],
			selectedItem:{},//当前选中的项目
		}
	},
	watch: {},
	computed: {
		...mapState(["loginUser", "area"]),
	},
	beforeDestroy() {},
	mounted() {},
	methods: {
		show(obj,bloodBag) {
			console.log('选中：',obj);
			console.log('血袋：',bloodBag);
			this.list.forEach(el=>{
				if(Number(el.value) <= Number(bloodBag.xdzt)){
					this.$set(el,'usable',false);
				}else{
					this.$set(el,'usable',true);
				}
				el.show = true;
				if(bloodBag.suspendMark == '1'){//暂停
					this.list.find(el=>el.value == '11').show = false;//隐藏暂停
					this.list.find(el=>el.value == '12').show = true;//展示继续
				}else{
					this.list.find(el=>el.value == '11').show = true;//隐藏继续
					this.list.find(el=>el.value == '12').show = false;//展示暂停
				}
				if(Number(bloodBag.xdzt) >= 5){//输血结束后隐藏 暂停 和 继续
					this.list.find(el=>el.value == '11').show = false;//隐藏暂停
					this.list.find(el=>el.value == '12').show = false;//隐藏继续
				}
			})
			this.selectedItem = obj.selectedItem;
			this.visible = true
		},
		handleSelect(item){
			if(!item.usable) return;
			this.selectedItem = item;
			let obj = {
				item:item,
				index:this.list.findIndex(el=>el.value == item.value),
			}
			this.$emit('select',obj);
			this.visible = false;
		},
		//二次核对弹窗点击关闭
		handleDoubleCheckClose() {
			this.visible = false
		},
		handleClose() {
			this.visible = false
		},
		handleSubmit() {
			this.visible = false
		},
	},
}
</script>

<style lang="scss">
.tour-process {
	height: 900rpx;
	position: relative;
	padding: 20rpx;
	.tour-process-title {
        font-weight: bold;
		font-size: 34rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.tour-process-list {
		.tour-process-item {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			height: 100rpx;
		}
		.disabled {
			background-color: #f9f9f9;
			color: #999999;
		}
	}

	.submit-button {
		display: flex;
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		button {
			color: #262626;
			background-color: #ffffff;
			margin: 5rpx;
		}
		.primary-button {
			color: #ffffff;
			background-color: #4088fe;
		}
	}
}
</style>
